<?php $this->import('Header') ?>
<?php $this->addJs('js/jquery.form.js') ?>
    <div class="row-fluid">
        <div id="message-box"></div>
        <div class="btn-toolbar">
            <a href="javascript:;" onclick="history.go(-1);" class="btn">返回</a>
        </div>
        <div class="well">
            <form action="" method="post" onsubmit="return verification(this)">
                <div class="div-margin5">
                    <span>广告标题：</span>
                    <input name="id" hidden="hidden" value="<?php echo $advertising['Id']?>"/>
                    <input name="title" type="text" class="input-large" value="<?php echo $advertising['Title'];?>"/>
                </div>
                <div class="div-margin5">
                    <span>连接地址：</span>
                    <input name="url" type="text" class="input-large" value="<?php echo $advertising['Url'];?>"/>
                </div>
                <div class="div-margin5">
                    <span>打开方式：</span>
                    <select name="jump" class="input-large">
                        <option value="1" selected>----在新窗口打开</option>
                        <option value="2" <?php echo $advertising['Jump'] == 2 ? 'selected' : '';?>>----在原窗口打开</option>
                    </select>
                </div>
                <div class="div-margin5">
                    <span>封面图片：</span>
                    <input id="js-cover" type="text"readOnly="true"  name="cover" value="<?php echo $advertising['Cover'];?>" style="display:none;"/>
                    <a id="js-upfile-btn" class="btn" >选择图片</a>
                    <div class="progress" hidden="hidden">
                        <span class="bar"></span><span class="percent">0%</span >
                    </div>
                    <div id="js-img-div" <?php echo empty($advertising['Cover']) ? 'hidden="hidden"' : '';?> style="margin-left: 75px;position: relative;">
                        <img src="<?php echo $advertising['Cover'];?>" id="imgFile" width="210px;" border="1">
                        <i class="icon-remove" onclick="delImg(this)" style="position:absolute;left: 210px;top: 0px;"></i>
                    </div>
                </div>
                <div class="div-margin5">
                    <span>广告位置：</span>
                    <select name="type" class="input-large">
                        <?php foreach($advertisingPosition as $key => $val) {?>
                            <option value="<?php echo $key;?>">----<?php echo $val;?></option>
                        <?php }?>
                    </select>
                </div><div class="div-margin5">
                    <span>广告状态：</span>
                    <select name="status" class="input-large">
                        <option value="1">----有效</option>
                        <option value="0">----无效</option>
                    </select>
                </div>
                <div>
                    <span>广告内容：</span>
                    <textarea id="editor_id" name="content" style="width:850px;height:400px;"><?php echo $advertising['Content'];?></textarea>
                </div>
                <?php if(!empty($id)){?>
                    <div>
                        <input type="submit" value="保存修改">
                        <a href="javascript:void(0)" onclick="del(<?php echo $advertising['Id'] ?>)" class="btn btn-primary">删除</a>
                    </div>
                <?php } else {?>
                    <div><input type="submit" value="添加广告" class="btn btn-primary" /></div>
                <?php }?>
            </form>
        </div>
    </div>
    <form style="display: none;" id="js-upfile-form" method="post" enctype="multipart/form-data">
        <input type="file" name="cover" />
        <input type="submit" />
    </form>
<?php $this->import('Footer') ?>
<!-- 实例化编辑器 -->
<script>
    $(function() {//提交封面图片
        var bar = $('.bar');
        var percent = $('.percent');
        var progress = $(".progress");
        $('#js-upfile-btn').removeAttr('onclick');
        var form = $('#js-upfile-form');
        var cron;
        $('#js-upfile-btn').on('click', function() {
            form.find('input[name="cover"]').click();
        });
        form.find('input[name="cover"]').change(function(){
            var v = form.find('input[name="cover"]').val();
            if (v) {
                upload(form);
            }
        });
        function upload(form) {
            if (cron) {
                clearInterval(cron);
            }
            form.ajaxSubmit({
                url: '/Upload/Image',
                dataType: 'json',
                beforeSend: function() { //开始上传
                    $("#js-cover").empty(); //清空显示的图片
                    progress.show(); //显示进度条
                    var percentVal = '0%'; //开始进度为0%
                    bar.width(percentVal); //进度条的宽度
                    percent.html(percentVal); //显示进度为0%
                    $('#js-upfile-btn').html("上传中..."); //上传按钮显示上传中
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%'; //获得进度
                    bar.width(percentVal); //上传进度条宽度变宽
                    percent.html(percentVal); //显示上传进度百分比
                },
                success: function (d) {
                    if (d.error) {
                        alert(d.message);
                    } else {
                        $("#imgFile").attr("src", d.src);
                        $("#js-img-div").show();
                        $("#js-cover").val(d.url);
                        form.find('input[name="cover"]').val(null);
                        $('#js-upfile-btn').html("选择图片"); //上传按钮显示上传中
                    }
                }
            });
        }
    });

    function verification(obj){
        var title = $(obj).find('input[name="title"]').val();
        if(!title){
            alert('标题不能为空！');
            return false;
        }
        return true;
    }

    function delImg(obj){
            $(obj).parent().hide();
            $("#js-cover").val("");
    }

    function del(id){
        var r=confirm("是否删除这条数据？")
        if(r){
            $.ajax({
                url: '/Ajax/Article/del',
                type: 'post',
                dataType: 'json',
                data: {id:id},
                success: function(data) {
                    if (data.error) {
                        alert(data.data);
                    } else {
                        alert('广告删除成功！');
                        window.location.href='/Article/Lists';
                    }
                }
            });
        }else{
            alert('你取消了删除操作！');
        }
    }
</script>